<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>打款记录</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
</head>

<style type="text/css">
    table.table-detail-list tbody > tr {
        cursor: pointer;
    }
    .basicinfo{
        font-weight: bold;
        padding-right: 13px;
    }
    table {table-layout: fixed;}
    td {
        white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
        overflow:hidden;/*隐藏多余的内容*/
        text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本 for IE*/
        -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
    }
</style>

<body class="skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">打款记录</div>
    <div class="down_line"></div>
</section>

<!-- Main content -->
<section class="content" >
    <div class="row">
        <div class="col-xs-12" style="padding-left: inherit;">
            <div class="box-header">
                <form class="form-inline">
                    <label>查询:</label>
                    <div class="form-group">
                        <select class="form-control" id="status">
                            <option value="">全部</option>
                            <option value="1">成功</option>
                            <option value="0">失败</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" id="tradeNum" class="form-control" style="width: 235px" placeholder="输入流水号搜索"/>
                    </div>

                    <div class="form-group">
                        <button type="button" onclick="getCrowdfund();"  class="btn btn-block btn-primary">搜索</button>
                    </div>
                </form>

            </div>
            <!-- 数据列表展示 -->
            <div class="box-body">
                <table id="transferMoneyList" class="table table-bordered table-hover" >
                    <thead>
                    <tr>
                        <th>流水号</th>
                        <th>用户手机号</th>
                        <th>用户姓名</th>
                        <th>打款方式</th>
                        <th>收款账号</th>
                        <th>打款金额</th>
                        <th>是否打款成功</th>
                        <th>失败原因</th>
                        <th>打款时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- 【查看打款记录】弹出窗内容 -->
<div class="modal" id="transferMoneyDetailListDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" >
    <div class="modal-dialog">
        <div class="modal-content" style="width: 200%;height: 80%;margin-left: -40%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center">众筹单打款记录</h4>
            </div>
            <div class="box-body" style="height:100%;">
                <table id="tranferMoneyDetailList" class="table table-bcardordered table-hover table-detail-list" >
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>卡号</th>
                        <th>目标金额</th>
                        <th>已筹集金额</th>
                        <th>服务费</th>
                        <th>提现费</th>
                        <th>打款金额</th>
                        <th>订单号</th>
                        <th>打款状态</th>
                    </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 【众筹单详情】弹出窗内容 -->
<div class="modal" id="crowdfundDetailDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" >
    <div class="modal-dialog">
        <div class="modal-content" style="width: 200%; margin-left: -40%;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center">众筹单详情</h4>
            </div>
            <div class="modal-body">

    <ul class="nav nav-tabs " style="padding-top: 15px;padding-left: 10px;">
        <li class="active" id="crowdfundInfoTab"><a href="#tab_1" data-toggle="tab" aria-expanded="false" style="font-size: 16px;">众筹基本信息</a></li>
        <li class="" id="crowdfundOfferListTab"><a href="#tab_2" data-toggle="tab" aria-expanded="false" style="font-size: 16px;">筹款记录</a></li>
    </ul>

    <div class="tab-content" style="padding:15px">
        <!-- 众筹详情 -->
        <div class="tab-pane active" id="tab_1">
            <table style="width: 100%;">
                <tr>
                    <td class="basicinfo" align="right" style="width: 10%;">众筹标题：</td>
                    <td id="title" ></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">众筹类型：</td>
                    <td id="type" align="left"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">筹集金额：</td>
                    <td id="targetMoney"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">已筹金额：</td>
                    <td id="currentMoney"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">发单银行卡：</td>
                    <td id="bankCard"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">收款银行卡：</td>
                    <td id="receiptBankCard"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">用户昵称：</td>
                    <td id="username"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">用户账号：</td>
                    <td id="account"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">账单金额：</td>
                    <td id="billMoney"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right" >账单图片：</td>
                    <td>
                        <img id="img" style="border:1px dashed #ddd;width:150px;" onclick="maxPic(this.src)">
                        <img id="img2" style="border:1px dashed #ddd;width:150px;" onclick="maxPic(this.src)">
                        <img id="img3" style="border:1px dashed #ddd;width:150px;" onclick="maxPic(this.src)">
                    </td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">账单类型：</td>
                    <td id="billType"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">开始时间：</td>
                    <td id="startTime"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">结束时间：</td>
                    <td id="endTime"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">状态：</td>
                    <td id="status"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">打款订单号：</td>
                    <td id="orderNum"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">服务费：</td>
                    <td id="serviceMoney"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">筹集原因：</td>
                    <td >
                        <textarea rows="4" id="reason" readonly="readonly" style="width: 100%;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">信用扣分：</td>
                    <td id="creditPoint"></td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">扣分原因：</td>
                    <td >
                        <textarea rows="4" id="creditReason" readonly="readonly" style="width: 100%;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="basicinfo" align="right">驳回原因：</td>
                    <td >
                        <textarea rows="4" id="rejectResion" readonly="readonly" style="width: 100%;"></textarea>
                    </td>
                </tr>
            </table>
        </div>

        <!--筹款记录-->
        <div class="tab-pane" id="tab_2">
            <section class="content" >
                <div class="row">
                    <div class="col-xs-12" style="padding-left: inherit;">
                        <div class="box-header">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label>查询:</label>
                                    <input type="text" id="searchCrowdOffer" class="form-control" placeholder="输入用户账号/互助金额搜索"/>
                                </div>

                                <div class="form-group">
                                    <button type="button" onclick="getCrowdMoneyDetail();"  class="btn btn-block btn-primary">搜索</button>
                                </div>
                            </form>

                        </div>
                        <!-- 数据列表展示 -->
                        <div class="box-body" style="height:100%;">
                            <table id="crowdfundOfferUserList" class="table table-bordered table-hover" >
                                <thead>
                                <tr>
                                    <th>用户账号</th>
                                    <th>用户昵称</th>
                                    <th>用户手机号</th>
                                    <th>互助金额</th>
                                    <th>互助时间</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
            </div>
        </div>
    </div>
</div>
<!-- page script -->
<script>
    $(document).ready(function() {
        //加载数据
        getCrowdfund();
    });


    function getCrowdfund(){
        var table = $('#transferMoneyList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,   //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/crowdfund/tranferMoneyList",
                type:"post",
                data:{
                    "status" : $("#status").val(),
                    "tradeNum" : $("#tradeNum").val()
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "tradeNum", 'sClass': "text-center",'width': '8%',
                    "render": function ( data, type, full, meta ) {
                        var str='<span onclick="showTransferMoneyDetail(' + "'" + full.crowdfundIds + "'" + ')" style="cursor: pointer;">' + data + '</span>';
                        return str;
                    }
                },
                {"data": "userMobile", 'sClass': "text-center",'width': '8%'},
                {"data": "partyName", 'sClass': "text-center",'width': '5%'},
                {"data": "payWay", 'sClass': "text-center",'width': '4%',
                    "render": function ( data, type, full, meta ) {
                        var str ;
                        if(data == 1){
                            str = "支付宝"
                        }else if(data == 2){
                            str = "银行卡";
                        }
                        return str;
                    }
                },
                {"data": "cardNum", 'sClass': "text-center",'width': '8%'},
                {"data": "money", 'sClass': "text-center",'width': '5%'},
                {"data": "status", 'sClass': "text-center",'width': '5%',
                    "render": function ( data, type, full, meta ) {
                        var str = "";
                        if(data==1 ){
                            str="<span class='label label-success' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >是</span> ";
                        }
                        if(data == 0) {
                            str="<span class='label label-danger' style='padding-left:10px;padding-right:10px;padding-top: inherit;'>否</span>";
                        }
                        return str;
                    }
                },
                {"data": "errorMsg", 'sClass': "text-center",'width': '8%'},
                {"data": "transTime", 'sClass': "text-center",'width': '6%',
                    "render": function ( data, type, full, meta ) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                },
                {"data": "crowdfundIds" , 'sClass': "text-center" ,'width':'5%',
                    "render": function (data, type, full, meta ) {
                        var str = "<a href = '#' title='查看打款详情' onclick=showTransferMoneyDetail('" + data +"');><i class='\glyphicon glyphicon-eye-open'></i></a>&nbsp;&nbsp;&nbsp;";
                        return str;
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }


    //查看打款明细
    function showTransferMoneyDetail(ids) {
        var table = $('#tranferMoneyDetailList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/crowdfund/tranferMoneyDetail",
                type:"post",
                data:{
                    crowdfundIds : ids
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "id", 'sClass': "text-center",'width': '2%'},
                {"data": "title", 'sClass': "text-center",'width': '7%'},
                {"data": "cardNum", 'sClass': "text-center",'width': '6%'},
                {"data": "targetMoney", 'sClass': "text-center",'width': '5%'},
                {"data": "currentMoney", 'sClass': "text-center",'width': '5%'},
                {"data": "serviceMoney", 'sClass': "text-center",'width': '5%'},
                {"data": "cashOut", 'sClass': "text-center",'width': '5%'},
                {"data": "payMoney", 'sClass': "text-center",'width': '5%'},
                {"data": "orderNum", 'sClass': "text-center",'width': '8%'},
                {"data": "payStatus", 'sClass': "text-center",'width': '3%',
                    "render":function( data, type, full, meta) {
                        var str = "";
                        if(data == '' || data == 0){
                            str += "<span class='label label-danger' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >打款失败</span> ";
                        }else if(data == 1){
                            str += "<span class='label label-success' style='padding-left:3px;padding-right:3px;padding-top: inherit;' >打款成功</span> ";
                        }
                        return str;
                    }
                }
            ],
            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
            "initComplete": function( settings, json ) {
                $('#tranferMoneyDetailList tbody').on('click', 'tr', function() {
                    var data = table.row(this).data();
                    if (!!data) {
                        if (!!data.id) {
                            showCrowdDetail(data.id);
                        }
                    }
                });
              }
        });
        $("#transferMoneyDetailListDialog").modal("show");
    }
    
    function showCrowdDetail(crdId) {
        $("#searchCrowdOffer").val("");
        $("#crowdfundInfoTab").addClass("active");
        $("#crowdfundOfferListTab").removeClass("active");
        $("#tab_1").addClass("active");
        $("#tab_2").removeClass("active");
        getCrowdDetail(crdId);
        getCrowdMoneyDetail(crdId);
        $("#crowdfundDetailDialog").modal("show");
    }

    function getCrowdDetail(crdId) {
        $.ajax({
            type:"POST",
            url:"/crowdfund/getCrowdfundById",
            async : true,//默认就是true
            dataType:"json",
            data:{id : crdId},
            success:function(result){
                if(result != null){
                   result = result.data.crowdfund;
                   $("#title").html(result.title);
                   $("#targetMoney").html(result.targetMoney);
                   $("#currentMoney").html(result.currentMoney);
                   $("#account").html(result.userAccount);
                   $("#username").html(result.username);
                   $("#bankCard").html(result.cardNum + "（" + result.bankName + "）");
                   if (result.receiptCardNum) {
                      $("#receiptBankCard").html(result.receiptCardNum + "（" + result.receiptBankName + "）");
                   } else {
                      $("#receiptBankCard").html("");
                   }
                    $("#billMoney").html(result.billMoney);
                    result.billType == 1? $("#billType").html("需好友担保") : $("#billType").html("系统分配的");
                    $("#startTime").html(toDate(result.startTime).format('yyyy-MM-dd HH:mm:ss'));
                    $("#endTime").html(toDate(result.endTime).format('yyyy-MM-dd HH:mm:ss'));
                    $("#serviceMoney").html(result.serviceMoney);

                    $("#creditPoint").html(result.creditPoint);
                    $("#creditReason").html(result.creditReason);
                    $("#rejectResion").html(result.rejectResion);

                    //清除之前的图片缓存
                    $("#img").attr("src","");
                    $("#img2").attr("src","");
                    $("#img3").attr("src","");
                    var len =result.img.split("$");
                    if(len != 0){
                        $("#img").attr("src",len[0]);
                        if(len.length > 1){
                            $("#img2").attr("src",len[1]);
                            $("#img2").show();
                        }else{
                            $("#img2").hide();
                        }
                        if(len.length > 2){
                            $("#img3").attr("src",len[2]);
                            $("#img3").show();
                        }else{
                            $("#img3").hide();
                        }
                    }else{
                        $("#img").hide();
                        $("#img2").hide();
                        $("#img3").hide();
                    }

                    if(result.type == 1){
                        $("#type").html("江湖救急");
                    }else if(result.type == 2){
                        $("#type").html("还房贷");
                    }else if(result.type == 3){
                        $("#type").html("还车贷");
                    }else if(result.type == 4){
                        $("#type").html("还信用卡");
                    }else if(result.type == 5){
                        $("#type").html("求助");
                    }

                    if(result.status == 0){
                        $("#status").html("审核中");
                    }else if(result.status == 1){
                        $("#status").html("进行中(审核通过)");
                    }else if(result.status == 2){
                        $("#status").html("付款中");
                    }else if(result.status == 3){
                        $("#status").html("已结束");
                    }else if(result.status == 4){
                        $("#status").html("进行中(被扣分)");
                    }else if(result.status == 5){
                        $("#status").html("已驳回");
                    }else if(result.status == 6){
                        $("#status").html("已失效");
                    }else if(result.status == 21){
                        $("#status").html("付款中(暂停付款)");
                    }
                    $("#orderNum").html(result.orderNum);
                    $("#reason").html(result.reason);

                }
            },
            failure:function(result) {
                layer.msg('网络错误！');
            },
        });
    }

    function getCrowdMoneyDetail(crdId){
        var searchCrowd = $("#searchCrowdOffer").val();
        var table = $('#crowdfundOfferUserList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,   //true代表后台处理分页，false代表前台处理分页
            "ajax" :  {
                url:"/crowdfund/getCrowdfundDetailList",
                type:"post",
                data:{
                    crowdfundId : crdId,
                    keyWord : searchCrowd
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "acount", 'sClass': "text-center",'width': '8%',
                    "render": function ( data, type, full, meta ) {
                        if (data == null){
                            return "微信用户"
                        } else{
                            return data;
                        }
                    }
                },
                {"data": "userName", 'sClass': "text-center",'width': '8%'},
                {"data": "mobile", 'sClass': "text-center",'width': '10%'},
                {"data": "money", 'sClass': "text-center",'width': '6%'},
                {"data": "createTime", 'sClass': "text-center",'width': '10%',
                    "render": function ( data, type, full, meta ) {
                        return toDate(data).format('yyyy-MM-dd HH:mm:ss');
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }

    let tip_index = 0;
    //表格对象
    const $dataList = $("#transferMoneyList");
    //鼠标悬停显示内容
    $dataList.on("mouseover", "td", function() {
        if(this.offsetWidth < this.scrollWidth) { //判断文本是否超出
            const content = $(this).text(); //获取文案
            if(content) {
                tip_index = layer.tips(content, this, { time: 0 , tips: [3, '#ffb951'], area: ['300px', 'auto']});
            }
        }
    });
    //鼠标移开隐藏内容
    $dataList.on("mouseleave",  "td", function() {
        layer.close(tip_index);
    })

</script>
</body>
</html>
